<style>
* {
    margin: 0px;
    padding: 0px;
}

.col-marleft {
    display: flex;
    justify-content: space-around;
}

.head_search {
    margin-bottom: 10px;
}
</style>
<template>
    <!-- 头部搜索 -->
    <div class="head_search">
        <el-row>
            <el-col :span="5">
                <el-input v-model="search" placeholder="请输入科室名称" />
            </el-col>
            <el-col :span="10">
                <!-- 搜索 -->
                <el-button type="primary" plain style="margin-left: 10px;" @click="getDataByName">
                    <el-icon>
                        <Search />
                    </el-icon>搜索
                </el-button>
                <!-- 打开添加弹窗 -->
                <el-button type="info" @click="dialogFormVisible = true" plain>
                    <el-icon>
                        <Plus />
                    </el-icon>添加
                </el-button>
                <!-- 批量删除 -->
                <el-button type="danger" @click="handleDelete(0, 0)" plain>
                    <el-icon>
                        <Delete />
                    </el-icon>批量删除
                </el-button>
            </el-col>
        </el-row>
    </div>

    <!-- 表格 -->
    <!-- 设置表格中的语言配置为中文 -->
    <el-config-provider :locale="zhCn">
        <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="id" />
            <el-table-column label="科室代码" prop="deptCode" />
            <el-table-column label="科室名称" prop="deptName" />
            <el-table-column label="科室位置" prop="position" />
            <el-table-column label="排序ID" prop="orderNum" />
            <el-table-column label="科室类别" prop="deptType" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block" style="margin-top: 10px;">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-config-provider>

    <!-- 添加/编辑Form -->
    <el-dialog v-model="dialogFormVisible" title="添加科室" :before-close="handleClose">
        <el-form :model="form" :label-position="labelPosition" class="demo-form-inline">
            <!-- 科室代码/科室名称-->
            <el-row class="col-marleft">
                <el-col :span="11">
                    <el-form-item label="科室代码">
                        <el-input v-model="form.deptCode" placeholder="请输入科室代码" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="科室名称">
                        <el-input v-model="form.deptName" placeholder="请输入科室名称" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 排序ID/科室类型-->
            <el-row class="col-marleft">
                <el-col :span="11">
                    <el-form-item label="排序ID">
                        <el-input-number v-model.number="form.orderNum" style="width: 100%;" :min="0" />

                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="科室类型">
                        <el-select v-model="form.deptType" placeholder="选择科室类型">
                            <el-option label="普通" value="1" />
                            <el-option label="重点" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 科室位置 -->
            <el-row class="col-marleft">

                <el-col :span="23">
                    <el-form-item label="科室位置">
                        <el-input v-model="form.position" :rows="2" type="textarea" placeholder="请输入科室位置" />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="clearForm">取消</el-button>
                <el-button type="primary" @click="btnSave">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, onMounted, ref, reactive, watch } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox, ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

//设置添加部门表单的input前文字
const labelPosition = ref('top');


//弹出窗状态
var dialogFormVisible = ref(false)

//存储选中的数据的id集合
const idArr = ref([]);

//获取表格多选按钮选中后的数据id集合
const handleSelectionChange = (val) => {
    idArr.value = val.map(item => item.id); // 获取选中行的id组成的数组，假设id是每一行的一个
}

//存储服务器返回的所有数据
var tableData = ref([]);

//搜索框数据
var search = ref('');
//搜索
function getDataByName() {
    bindData(pageSize.value, 1, search.value);
}

//页面渲染后加载
onMounted(() => {
    bindData(pageSize.value, 1, search.value);
});


//编辑
var handleEdit = (index, row) => {
    var info = {
        id: row.id,//主键ID
        deptCode: row.deptCode,//科室代码
        deptName: row.deptName,//科室名称
        introduction: row.introduction,//科室介绍
        position: row.position,//科室位置
        deptType: row.deptType,//科室类型
        orderNum: row.orderNum,//排序
        imgUrl: row.imgUrl//图片地址
    }
    Object.assign(form, info);
    dialogFormVisible.value = true;
}

//删除
var handleDelete = (index, row) => {
    var id;//删除数据的主键
    ElMessageBox.confirm(
        '确定要删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        id = row.id > 0 ? row.id : idArr.value.join(',');
        axios.delete(`/api/business/Dept/${id}`).then(function (res) {
            // console.log(res);
            //返回格式：{code: 110, msg: "存在下级部门，不允许删除"}
            if (res.data.code == 200) {
                ElMessage({
                    type: 'success',
                    message: "删除成功"
                })
                bindData(pageSize.value, 1, search.value);
            } else {
                ElMessage({
                    type: 'warning',
                    message: "删除失败" + res.data.msg
                })
            }

        }).catch(() => {
            ElMessage({
                type: 'warning',
                message: "删除失败!"
            })
        })

    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '用户取消操作',
        })
    })
}

//分页
const currentPage = ref(1)//当前页数
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const pageSize = ref(5)//每页条数
const total = ref(0)//总数据量

//切换每页条数
const handleSizeChange = (val) => {
    bindData(val, currentPage.value, search.value);
}

//切换页数
const handleCurrentChange = (val) => {
    bindData(pageSize.value, val, search.value);
}

//查询绑定数据
function bindData(page, pageNum, strName) {
    axios.get(`/api/business/Dept/list?PageNum=${pageNum}&PageSize=${page}&TotalNum=16&TotalPageNum=0&DeptName=${strName}`).then(function (res) {
        tableData.value = res.data.data.result;
        currentPage.value = res.data.data.pageIndex;
        total.value = res.data.data.totalCount;
    }).catch(() => {
        ElMessage({
            type: 'warning',
            message: "网络异常!"
        })
    });
}


//存储保存添加/编辑时的数据
var form = reactive({
    id: 0,//主键ID
    deptCode: "",//科室代码
    deptName: "",//科室名称
    introduction: "",//科室介绍
    position: "",//科室位置
    deptType: "",//科室类型
    orderNum: 0,//排序
    imgUrl: ""//图片地址
});

//保存
function btnSave() {
    axios({
        url: '/api/business/Dept',
        method: form.id == 0 ? 'post' : 'put',
        data: form
    }).then((res) => {
        var str = form.id == 0 ? '添加' : '编辑'
        if (res.data.code == 200) {
            ElMessage({
                message: str + '成功',
                type: 'success',
            });
            clearForm();
            bindData(pageSize.value, 1, search.value);
        } else {
            ElMessage({
                message: str + '失败',
                type: 'warning',
            })
        }
    })
}

//模态框关闭
const handleClose = () => {
    clearForm();
}

//清理form表单存留数据
function clearForm() {
    dialogFormVisible.value = false;
    var info = {
        id: 0,//主键ID
        deptCode: "",//科室代码
        deptName: "",//科室名称
        introduction: "",//科室介绍
        position: "",//科室位置
        deptType: "",//科室类型
        orderNum: 0,//排序
        imgUrl: ""//图片地址
    }
    Object.assign(form, info)
}

</script>